<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/copyPaste.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="copyPasteDemo">
	<!-- Demo区 -->
    	
		<div id="fsiStudent">
			<div class="ccay-grid">
				<div id="tbriStudent" class="ccay-grid-toolbar">
					<span id="btniStudentDel" class="ccay-button" >
						<a class="ccay-icon pre-del"></a>
						<label>delete</label>
					</span>
					<span id="btniStudentUndoDel" class="ccay-button" >
						<a class="ccay-icon undel"></a>
						<label>undo delete</label>
					</span>
					<span id="btniStudentAdd" class="ccay-button" >
						<a class="ccay-icon add"></a>
						<label>insert</label>
					</span>
					<span id="btniStudentSave" class="ccay-button" >
						<a class="ccay-icon save"></a>
						<label>save</label>
					</span>
			 	</div>
			 	<div id="grdiStudent"></div>
			</div>
		</div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1'>
&lt;form id="fmigridDemo" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;span id="btnigridDemoSearch" class="ccay-button default" >
			&lt;a class="ccay-icon search">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
		&lt;/span>
		&lt;span class="init button ccay-button reset" >
			&lt;a class="ccay-icon reset">&lt;/a>
			&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
		&lt;/span>
	&lt;/div>
&lt;/form>
&lt;!-- 将需要全屏的容器包起来  -->
&lt;div id="fsigridDemo">
	&lt;div id="tbrigridDemo" class="ccay-grid-toolbar">
		&lt;span id="btnigridDemoDel" class="ccay-button" >
			&lt;a class="ccay-icon pre-del">&lt;/a>
			&lt;label>delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoUndoDel" class="ccay-button" >
			&lt;a class="ccay-icon undel">&lt;/a>
			&lt;label>undo delete&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoAdd" class="ccay-button" >
			&lt;a class="ccay-icon add">&lt;/a>
			&lt;label>insert&lt;/label>
		&lt;/span>
		&lt;span id="btnigridDemoSave" class="ccay-button" >
			&lt;a class="ccay-icon save">&lt;/a>
			&lt;label>save&lt;/label>
		&lt;/span>
 	&lt;/div>
 	&lt;div id="igridDemo">&lt;/div>
&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
var linkBtns = [
	{text: "${id}", click: Ccay.example.ui.igird.managerFunction.operateTest}
];
var gridOption = {
	//<span class="showClew"> 设置最小高度</span>
	minHeight: 200,
	
	//<span class="showClew"> 设置最大高度</span>
	maxHeight: 500,
	editMode: true,
	wrapHead: false,
	//<span class="showClew"> <font color="red">允许复制</font></span>
	allowCopy: true,
	//<span class="showClew"> 开启个性化设置</span>
	customSetting: true,
	
	//<span class="showClew"> 设置工具栏容器</span>
	toolPanel: "#tbrigridDemo",
	
	//<span class="showClew"> 设置全屏容器</span>
	fullPanel: "#fsigridDemo",
    columns: [
    	{columnType: 'select'},
		{columnType: 'operate', width: 70, freezeable: true, btns:linkBtns},
		{field: 'name', width:90, header: "ccay.common.label.name", freezeable: true, rule: {required: true}},
		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
		{field: 'province', width:100, header: "lookup", type: 'lookup', format: 
		 		{supportLang: true, code: "province"}, rule: {required: true}}, 
		//<span class="showClew"> sort: "asc"设置该列的排序方式</span>
		{field: 'age', width:70, header: "sAge", type: 'integer', sort: "asc"},
		{field: 'birthday', width:110, header: "sBirthday", type: 'date', hidden: true},
		{field: 'blog', width:200, header: "sBlog", showTip:true},
		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false}
    ],
    
    //<span class="showClew"> url地址必须使用服务器端排序的方式</span>
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
    operation: {
    	search: {
    		btn: '#btnigridDemoSearch',
			panel: '#fmigridDemo'
    	},
    	del: {
    		btn: '#btnigridDemoDel',
    		undoBtn: '#btnigridDemoUndoDel'
    	},
    	insert: {
    		btn: '#btnigridDemoAdd',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow: {sex: 1, blog: 'http://'}
    	},
    	save: {
    		btn: '#btnigridDemoSave',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};
$("#igridDemo").igrid(gridOption);
      		</pre>
      	</div>
      <!-- 	<div class="try">
			<a onclick="Ccay.example.openTry('#copyPasteDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>	 -->
   